<template>
  <div id="app" @click="start">
    <h2>测试题</h2>
    <subject v-for="(item,index) in arr" :key="index" :arr="item" :index="index" @onsub="submit"></subject>
    <flag
      v-for="(item,index) in arr"
      :disabled="disabled"
      :status="item.status"
      :index="index"
      :key="index"
    ></flag>
  </div>
</template>
<script>
import subject from "./subject";
import flag from "./flag";
export default {
  components: { subject, flag },
  data() {
    return {
      arr: [],
      disabled: false
    };
  },
  methods: {
    start() {
      this.disabled = false;
      this.arr = [];
      for (let i = 0; i < 4; i++) {
        let a = { a: 0, b: 0, status: "未完成" };
        a.a = Math.ceil(Math.random() * 9);
        a.b = Math.ceil(Math.random() * 9);
        this.arr.push(a);
      }
      console.log(this.arr);
    },
    submit(str, i) {
      this.arr[i].status = str;
    }
  },
  created() {
    this.start();
  },
  mounted() {}
};
</script>

<style scoped>
body {
  background-color: #eee;
}

#app {
  background-color: #0094ff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>